<template>
  <div class="settings-page">
    <div class="page-header">
      <div class="header-left">
        <h1>系统设置</h1>
        <p>管理平台配置和个人偏好</p>
      </div>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <!-- 基本设置 -->
          <el-tab-pane label="基本设置" name="basic">
            <el-card shadow="never">
              <template #header>
                <span>基本设置</span>
              </template>
              
              <el-form label-width="120px" :model="basicForm">
                <el-form-item label="网站标题">
                  <el-input v-model="basicForm.siteTitle" placeholder="个人作品集" />
                </el-form-item>
                
                <el-form-item label="网站描述">
                  <el-input 
                    v-model="basicForm.siteDescription" 
                    type="textarea" 
                    :rows="3"
                    placeholder="个人作品集网站描述"
                  />
                </el-form-item>
                
                <el-form-item label="关键词">
                  <el-input 
                    v-model="basicForm.keywords" 
                    placeholder="前端开发,Vue.js,JavaScript"
                  />
                  <small>用逗号分隔多个关键词</small>
                </el-form-item>
                
                <el-form-item label="网站主题">
                  <el-radio-group v-model="basicForm.theme">
                    <el-radio label="dark">深色主题</el-radio>
                    <el-radio label="light">浅色主题</el-radio>
                    <el-radio label="auto">跟随系统</el-radio>
                  </el-radio-group>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
                  <el-button @click="resetBasicSettings">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          
          <!-- 显示设置 -->
          <el-tab-pane label="显示设置" name="display">
            <el-card shadow="never">
              <template #header>
                <span>显示设置</span>
              </template>
              
              <el-form label-width="120px" :model="displayForm">
                <el-form-item label="页面布局">
                  <el-radio-group v-model="displayForm.layout">
                    <el-radio label="grid">网格布局</el-radio>
                    <el-radio label="list">列表布局</el-radio>
                  </el-radio-group>
                </el-form-item>
                
                <el-form-item label="每页显示数">
                  <el-select v-model="displayForm.pageSize" style="width: 120px">
                    <el-option label="5条" :value="5" />
                    <el-option label="10条" :value="10" />
                    <el-option label="20条" :value="20" />
                    <el-option label="50条" :value="50" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="动画效果">
                  <el-switch v-model="displayForm.animation" />
                  <small>启用页面切换动画效果</small>
                </el-form-item>
                
                <el-form-item label="加载动画">
                  <el-switch v-model="displayForm.loadingAnimation" />
                  <small>显示数据加载动画</small>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveDisplaySettings">保存设置</el-button>
                  <el-button @click="resetDisplaySettings">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          
          <!-- 通知设置 -->
          <el-tab-pane label="通知设置" name="notifications">
            <el-card shadow="never">
              <template #header>
                <span>通知设置</span>
              </template>
              
              <el-form label-width="120px">
                <el-form-item label="邮件通知">
                  <el-switch v-model="notificationForm.email" />
                  <small>新留言时发送邮件通知</small>
                </el-form-item>
                
                <el-form-item label="浏览器通知">
                  <el-switch v-model="notificationForm.browser" />
                  <small>重要操作时显示浏览器通知</small>
                </el-form-item>
                
                <el-form-item label="通知频率">
                  <el-select v-model="notificationForm.frequency">
                    <el-option label="立即" value="immediate" />
                    <el-option label="每小时" value="hourly" />
                    <el-option label="每日" value="daily" />
                    <el-option label="每周" value="weekly" />
                  </el-select>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
                  <el-button @click="resetNotificationSettings">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          
          <!-- 安全设置 -->
          <el-tab-pane label="安全设置" name="security">
            <el-card shadow="never">
              <template #header>
                <span>安全设置</span>
              </template>
              
              <el-form label-width="120px">
                <el-form-item label="修改密码">
                  <el-button @click="showPasswordDialog = true">修改登录密码</el-button>
                </el-form-item>
                
                <el-form-item label="登录日志">
                  <el-button @click="showLoginLog = true">查看登录日志</el-button>
                </el-form-item>
                
                <el-form-item label="会话超时">
                  <el-select v-model="securityForm.sessionTimeout">
                    <el-option label="30分钟" :value="30" />
                    <el-option label="1小时" :value="60" />
                    <el-option label="2小时" :value="120" />
                    <el-option label="4小时" :value="240" />
                    <el-option label="8小时" :value="480" />
                  </el-select>
                  <small>设置会话超时时间</small>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
                  <el-button @click="resetSecuritySettings">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          
          <!-- 关于 -->
          <el-tab-pane label="关于" name="about">
            <el-card shadow="never">
              <template #header>
                <span>关于</span>
              </template>
              
              <div class="about-content">
                <div class="about-item">
                  <h4>版本信息</h4>
                  <p>个人作品集管理平台 v1.0.0</p>
                </div>
                
                <div class="about-item">
                  <h4>技术栈</h4>
                  <p>Vue 3 + Element Plus + Vite</p>
                </div>
                
                <div class="about-item">
                  <h4>最后更新</h4>
                  <p>2024-03-15</p>
                </div>
                
                <div class="about-item">
                  <h4>联系方式</h4>
                  <p>如有问题请联系：support@example.com</p>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    
    <!-- 修改密码对话框 -->
    <el-dialog v-model="showPasswordDialog" title="修改密码" width="400px">
      <el-form :model="passwordForm" label-width="100px">
        <el-form-item label="原密码">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="changePassword">确认修改</el-button>
      </template>
    </el-dialog>
    
    <!-- 登录日志对话框 -->
    <el-dialog v-model="showLoginLog" title="登录日志" width="600px">
      <el-table :data="loginLogs" style="width: 100%">
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="ip" label="IP地址" width="120" />
        <el-table-column prop="location" label="位置" />
        <el-table-column prop="device" label="设备" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
              {{ row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')
const showPasswordDialog = ref(false)
const showLoginLog = ref(false)

// 基本设置
const basicForm = ref({
  siteTitle: '个人作品集',
  siteDescription: '前端开发工程师的作品集网站',
  keywords: '前端开发,Vue.js,JavaScript',
  theme: 'dark'
})

// 显示设置
const displayForm = ref({
  layout: 'grid',
  pageSize: 10,
  animation: true,
  loadingAnimation: true
})

// 通知设置
const notificationForm = ref({
  email: true,
  browser: false,
  frequency: 'immediate'
})

// 安全设置
const securityForm = ref({
  sessionTimeout: 60
})

// 密码表单
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 登录日志
const loginLogs = ref([
  {
    time: '2024-03-15 10:30:15',
    ip: '192.168.1.100',
    location: '北京市',
    device: 'Chrome浏览器',
    status: 'success'
  },
  {
    time: '2024-03-14 16:20:30',
    ip: '192.168.1.101',
    location: '北京市',
    device: 'Safari浏览器',
    status: 'success'
  }
])

const handleTabChange = (tab) => {
  console.log('切换到标签页:', tab)
}

const saveBasicSettings = () => {
  ElMessage.success('基本设置已保存')
}

const resetBasicSettings = () => {
  basicForm.value = {
    siteTitle: '个人作品集',
    siteDescription: '前端开发工程师的作品集网站',
    keywords: '前端开发,Vue.js,JavaScript',
    theme: 'dark'
  }
}

const saveDisplaySettings = () => {
  ElMessage.success('显示设置已保存')
}

const resetDisplaySettings = () => {
  displayForm.value = {
    layout: 'grid',
    pageSize: 10,
    animation: true,
    loadingAnimation: true
  }
}

const saveNotificationSettings = () => {
  ElMessage.success('通知设置已保存')
}

const resetNotificationSettings = () => {
  notificationForm.value = {
    email: true,
    browser: false,
    frequency: 'immediate'
  }
}

const saveSecuritySettings = () => {
  ElMessage.success('安全设置已保存')
}

const resetSecuritySettings = () => {
  securityForm.value = {
    sessionTimeout: 60
  }
}

const changePassword = () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  
  ElMessage.success('密码修改成功')
  showPasswordDialog.value = false
  
  // 清空表单
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}


</script>

<style scoped>
.settings-page {
  padding: 0;
}

.about-content {
  padding: 20px 0;
}

.about-item {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.about-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.about-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.about-item p {
  color: #606266;
  margin: 0;
}

small {
  display: block;
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}
</style>